<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备类型参数管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .container {
            padding: 20px;
        }
        .header-operations {
            margin-bottom: 20px;
        }
        .info-tag {
            margin: 2px;
        }
        .el-dialog__body {
            padding: 20px 30px;
        }
        .el-table {
            margin: 8px 0;
        }
        .el-table th {
            padding: 10px 0;
        }
        .el-table td {
            padding: 8px 0;
        }
        .delete-btn {
            color: #F56C6C;
        }
        .delete-btn:hover {
            color: #f78989;
        }
        .el-table__row .el-input {
            width: 95%;
        }
        .el-select-dropdown__item i {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <!-- 设备类型参数管理 -->
            <div class="header-operations">
                <el-select v-model="paramSelectedGroup" placeholder="请选择分组" style="width: 200px; margin-right: 10px;">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="g in groups" :key="g.id" :label="g.name" :value="g.id"></el-option>
                </el-select>
                <el-button type="primary" size="small" @click="handleAdd">
                    <i class="el-icon-plus"></i> 新增设备类型参数
                </el-button>
            </div>
            <el-table :data="filteredDeviceTypesForParam" style="width: 100%">
                <el-table-column prop="name" label="设备类型名称" width="180"></el-table-column>
                <el-table-column label="设备信息参数" min-width="400">
                    <template slot-scope="scope">
                        <el-tag 
                            v-for="field in scope.row.infoFields" 
                            :key="field.name"
                            size="small"
                            class="info-tag">
                            {{field.name}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleEdit(scope.row)">
                            <i class="el-icon-edit"></i> 编辑
                        </el-button>
                        <el-button type="text" size="small" @click="handleDelete(scope.row)">
                            <i class="el-icon-delete"></i> 删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 编辑对话框 -->
            <el-dialog 
                :title="dialogTitle" 
                :visible.sync="dialogVisible"
                width="800px">
                <el-form :model="currentType" label-width="120px" size="small">
                    <el-form-item label="设备类型名称" required>
                        <el-input v-model="currentType.name" placeholder="请输入设备类型名称"></el-input>
                    </el-form-item>
                    <el-form-item label="设备信息参数">
                        <div style="margin-bottom: 15px;">
                            <el-button type="primary" size="small" @click="addInfoField">
                                <i class="el-icon-plus"></i> 添加信息字段
                            </el-button>
                        </div>
                        <el-table 
                            :data="currentType.infoFields" 
                            style="width: 100%"
                            border
                            :header-cell-style="{
                                background: '#f5f7fa',
                                color: '#606266',
                                fontWeight: 500
                            }">
                            <el-table-column prop="name" label="字段名称" width="200">
                                <template slot-scope="scope">
                                    <el-input 
                                        v-model="scope.row.name" 
                                        placeholder="请输入字段名称"
                                        size="small">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="type" label="字段类型" width="160">
                                <template slot-scope="scope">
                                    <el-select 
                                        v-model="scope.row.type" 
                                        placeholder="请选择" 
                                        size="small"
                                        style="width: 100%">
                                        <el-option label="文本" value="text">
                                            <i class="el-icon-document"></i> 文本
                                        </el-option>
                                        <el-option label="数字" value="number">
                                            <i class="el-icon-tickets"></i> 数字
                                        </el-option>
                                        <el-option label="日期" value="date">
                                            <i class="el-icon-date"></i> 日期
                                        </el-option>
                                        <el-option label="选择项" value="select">
                                            <i class="el-icon-circle-check"></i> 选择项
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="required" label="必填" width="100" align="center">
                                <template slot-scope="scope">
                                    <el-switch
                                        v-model="scope.row.required"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949">
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="description" label="字段描述">
                                <template slot-scope="scope">
                                    <el-input 
                                        v-model="scope.row.description" 
                                        placeholder="请输入字段描述"
                                        size="small">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="90" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button 
                                        type="text" 
                                        @click="removeInfoField(scope.$index)"
                                        class="delete-btn">
                                        <i class="el-icon-delete"></i> 删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleSave">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    groups: [
                        { id: 1, name: '建筑设施及设备区域' },
                        { id: 2, name: '供配电系统' },
                        { id: 3, name: '供/排水系统' },
                        { id: 4, name: '电梯系统' },
                        { id: 5, name: '消防系统' },
                        { id: 6, name: '空调系统' },
                        { id: 7, name: '环境系统' }
                    ],
                    deviceTypes: [
                        // 建筑设施及设备区域
                        { id: 1, groupId: 1, name: '生活供水机房' },
                        { id: 2, groupId: 1, name: '发电机房' },
                        { id: 3, groupId: 1, name: '高压配电机房' },
                        { id: 4, groupId: 1, name: '低压配电机房' },
                        { id: 5, groupId: 1, name: '变压器机房' },
                        { id: 6, groupId: 1, name: '集水井区域' },
                        { id: 7, groupId: 1, name: '直行电梯' },
                        // 供配电系统
                        { id: 8, groupId: 2, name: '配电柜', infoFields: [
                            { name: '配电柜型号', type: 'text', required: true, description: '配电柜规格型号' },
                            { name: '额定电流', type: 'number', required: true, description: '额定电流(A)' },
                            { name: '额定电压', type: 'number', required: true, description: '额定电压(V)' },
                            { name: '防护等级', type: 'text', required: true, description: '防护等级(IP)' },
                            { name: '生产厂家', type: 'text', required: true, description: '设备生产商' },
                            { name: '安装日期', type: 'date', required: true, description: '设备安装日期' },
                            { name: '断路器数量', type: 'number', required: false, description: '断路器数量(个)' }
                        ]},
                        { id: 9, groupId: 2, name: '变压器' },
                        { id: 10, groupId: 2, name: '发电机' },
                        { id: 11, groupId: 2, name: '蓄电池' },
                        { id: 12, groupId: 2, name: '发电机油箱' },
                        // 供/排水系统
                        { id: 13, groupId: 3, name: '水泵', infoFields: [
                            { name: '水泵型号', type: 'text', required: true, description: '水泵规格型号' },
                            { name: '额定功率', type: 'number', required: true, description: '额定功率(kW)' },
                            { name: '额定流量', type: 'number', required: true, description: '额定流量(m³/h)' },
                            { name: '额定扬程', type: 'number', required: true, description: '额定扬程(m)' },
                            { name: '生产厂家', type: 'text', required: true, description: '设备生产商' },
                            { name: '安装日期', type: 'date', required: true, description: '设备安装日期' },
                            { name: '维保周期', type: 'number', required: false, description: '维保周期(天)' }
                        ]},
                        { id: 14, groupId: 3, name: '集水井' },
                        { id: 15, groupId: 3, name: '水池/水箱' },
                        { id: 16, groupId: 3, name: '管网压力' },
                        // 电梯系统
                        { id: 17, groupId: 4, name: '电梯牵引机房' },
                        { id: 18, groupId: 4, name: '电梯轿厢' },
                        { id: 19, groupId: 4, name: '底坑' },
                        // 消防系统
                        { id: 20, groupId: 5, name: '散热风扇', infoFields: [
                            { name: '风扇型号', type: 'text', required: true, description: '风扇规格型号' },
                            { name: '额定功率', type: 'number', required: true, description: '额定功率(W)' },
                            { name: '转速', type: 'number', required: true, description: '额定转速(rpm)' },
                            { name: '风量', type: 'number', required: true, description: '额定风量(m³/h)' },
                            { name: '生产厂家', type: 'text', required: true, description: '设备生产商' },
                            { name: '安装位置', type: 'text', required: true, description: '设备安装位置' },
                            { name: '运行状态', type: 'select', required: true, description: '设备运行状态' }
                        ]},
                        // 空调系统
                        { id: 21, groupId: 6, name: '电梯空调', infoFields: [
                            { name: '空调型号', type: 'text', required: true, description: '空调规格型号' },
                            { name: '制冷功率', type: 'number', required: true, description: '制冷功率(kW)' },
                            { name: '制热功率', type: 'number', required: true, description: '制热功率(kW)' },
                            { name: '适用面积', type: 'number', required: true, description: '适用面积(㎡)' },
                            { name: '生产厂家', type: 'text', required: true, description: '设备生产商' },
                            { name: '安装日期', type: 'date', required: true, description: '设备安装日期' },
                            { name: '制冷剂类型', type: 'text', required: false, description: '制冷剂类型' }
                        ]},
                        // 环境系统
                        { id: 22, groupId: 7, name: '机房环境' },
                        // 原有的设备类型参数数据
                        {
                            id: 23,
                            name: '空调设备',
                            infoFields: [
                                { name: '生产厂家', type: 'text', required: true, description: '设备生产商名称' },
                                { name: '设备型号', type: 'text', required: true, description: '设备规格型号' },
                                { name: '生产日期', type: 'date', required: true, description: '设备生产日期' },
                                { name: '安装厂家', type: 'text', required: true, description: '安装单位名称' },
                                { name: '安装日期', type: 'date', required: true, description: '设备安装日期' },
                                { name: '维保单位', type: 'text', required: false, description: '维护保养单位' }
                            ]
                        },
                        {
                            id: 24,
                            name: '电梯设备',
                            infoFields: [
                                { name: '生产厂家', type: 'text', required: true, description: '设备生产商名称' },
                                { name: '设备型号', type: 'text', required: true, description: '设备规格型号' },
                                { name: '额定载重', type: 'number', required: true, description: '额定载重量(kg)' },
                                { name: '安装单位', type: 'text', required: true, description: '安装单位名称' },
                                { name: '维保单位', type: 'text', required: true, description: '维护保养单位' },
                                { name: '年检日期', type: 'date', required: true, description: '上次年检日期' }
                            ]
                        }
                    ],
                    dialogVisible: false,
                    dialogTitle: '',
                    currentType: {
                        name: '',
                        infoFields: []
                    },
                    isEdit: false,
                    paramSelectedGroup: ''
                }
            },
            computed: {
                filteredDeviceTypesForParam() {
                    if (this.paramSelectedGroup) {
                        return this.deviceTypes.filter(dt => dt.groupId === this.paramSelectedGroup);
                    }
                    return this.deviceTypes;
                }
            },
            methods: {
                // 参数管理
                handleAdd() {
                    this.isEdit = false;
                    this.dialogTitle = '新增设备类型参数';
                    this.currentType = {
                        name: '',
                        infoFields: []
                    };
                    this.dialogVisible = true;
                },
                handleEdit(row) {
                    this.isEdit = true;
                    this.dialogTitle = '编辑设备类型参数';
                    this.currentType = JSON.parse(JSON.stringify(row));
                    this.dialogVisible = true;
                },
                handleDelete(row) {
                    this.$confirm('确认删除该设备类型参数吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        const index = this.deviceTypes.findIndex(item => item.id === row.id);
                        if (index > -1) {
                            this.deviceTypes.splice(index, 1);
                        }
                        this.$message.success('删除成功');
                    });
                },
                addInfoField() {
                    this.currentType.infoFields.push({
                        name: '',
                        type: 'text',
                        required: false,
                        description: ''
                    });
                },
                removeInfoField(index) {
                    this.currentType.infoFields.splice(index, 1);
                },
                handleSave() {
                    if (!this.currentType.name) {
                        this.$message.warning('请输入设备类型名称');
                        return;
                    }
                    if (this.currentType.infoFields.some(f => !f.name)) {
                        this.$message.warning('请填写完整的字段信息');
                        return;
                    }
                    if (this.isEdit) {
                        const index = this.deviceTypes.findIndex(item => item.id === this.currentType.id);
                        if (index > -1) {
                            this.deviceTypes.splice(index, 1, {...this.currentType});
                        }
                    } else {
                        const newId = Math.max(...this.deviceTypes.map(t => t.id), 0) + 1;
                        this.deviceTypes.push({
                            ...this.currentType,
                            id: newId,
                            groupId: this.paramSelectedGroup || 1
                        });
                    }
                    this.dialogVisible = false;
                    this.$message.success('保存成功');
                }
            }
        })
    </script>
</body>
</html>
